<template>
  <div class="settings">
    <el-card>
      <template #header>
        <span>系统设置</span>
      </template>
      
      <el-tabs>
        <el-tab-pane label="基本设置">
          <el-form :model="basicSettings" label-width="150px">
            <el-form-item label="系统名称">
              <el-input v-model="basicSettings.systemName" />
            </el-form-item>
            <el-form-item label="库存预警值">
              <el-input-number v-model="basicSettings.stockWarning" :min="0" />
            </el-form-item>
            <el-form-item label="退货限额">
              <el-input-number v-model="basicSettings.refundLimit" :min="0" :precision="2" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveSettings">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="支付设置">
          <el-form label-width="150px">
            <el-form-item label="支付宝">
              <el-switch v-model="paymentSettings.alipay" />
            </el-form-item>
            <el-form-item label="微信支付">
              <el-switch v-model="paymentSettings.wechat" />
            </el-form-item>
            <el-form-item label="现金支付">
              <el-switch v-model="paymentSettings.cash" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveSettings">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="通知设置">
          <el-form label-width="150px">
            <el-form-item label="库存预警通知">
              <el-switch v-model="notificationSettings.stockWarning" />
            </el-form-item>
            <el-form-item label="订单通知">
              <el-switch v-model="notificationSettings.orderNotify" />
            </el-form-item>
            <el-form-item label="退货通知">
              <el-switch v-model="notificationSettings.refundNotify" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveSettings">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'

const basicSettings = reactive({
  systemName: '线上零售便利店系统',
  stockWarning: 10,
  refundLimit: 1000
})

const paymentSettings = reactive({
  alipay: true,
  wechat: true,
  cash: true
})

const notificationSettings = reactive({
  stockWarning: true,
  orderNotify: true,
  refundNotify: true
})

const saveSettings = () => {
  ElMessage.success('设置保存成功')
}
</script>

<style lang="scss" scoped>
.settings {
  //
}
</style>

















